import React, { Component } from "react";
import { Button, Table, Form, Row, Col, Select, DatePicker, Badge } from "antd";
import styles from "./Push.less";

const { Item } = Form;
const { RangePicker } = DatePicker;

const data = [
  {
    code: "traceCode",
    name: "traceCode21",
    channel: "推送渠道文案",
    target: "推送目标文案",
    department: "杨浦分局",
    status: "true",
    distributionTime: "2019-01-03 15:23:30"
  },
  {
    code: "traceCode",
    name: "traceCode21",
    target: "推送目标文案",
    channel: "推送渠道文案",
    department: "长宁分局",
    status: "false",
    distributionTime: "2019-01-03 15:23:30"
  }
];

const columns = [
  {
    title: "消息编号",
    dataIndex: "code"
  },
  {
    title: "消息名称",
    dataIndex: "name"
  },
  {
    title: "推送渠道",
    dataIndex: "channel"
  },
  {
    title: "推送目标",
    dataIndex: "target"
  },
  {
    title: "归属部门",
    dataIndex: "department"
    // filters: [{ text: "长宁分局", value: 1 }, { text: "杨浦分局", value: 2 }],
    // // filterMultiple: false,
    // onFilter: (value, record) =>
    //   record.department.toString().indexOf(value) === 0,
    // render: text => <div>{text === 1 ? "长宁分局" : "杨浦分局"}</div>
    // // width: "20%"
  },
  {
    title: "状态",
    dataIndex: "status",
    filters: [{ text: "失败", value: false }, { text: "成功", value: true }],
    // filterMultiple: false,
    onFilter: (value, record) => record.status.toString().indexOf(value) === 0,
    render: text => (
      <div>
        {text === "true" ? (
          <Badge status="success" text="成功" />
        ) : (
          <Badge status="default" text="失败" />
        )}
        {/* <font>{text}</font> */}
      </div>
    )
    // width: "20%"
  },
  {
    title: "分发时间",
    dataIndex: "distributionTime"
    // sorter: true
    // width: "20%"
  },
  {
    title: "操作",
    dataIndex: "operate",
    render: () => <a>编辑</a>
    // sorter: true
    // width: "20%"
  }
];

@Form.create()
class Push extends Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    const { history } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 0 },
        sm: { span: 16 }
      }
    };
    return (
      <div className={styles.root}>
        <Button
          type="primary"
          style={{ marginBottom: 16 }}
          onClick={() => {
            history.push("/recommendCenter/situation/addScene");
          }}
        >
          人工分发
        </Button>
        <Form>
          <Row gutter={24}>
            <Col span={8}>
              <Item label="推送渠道：" {...formItemLayout}>
                {getFieldDecorator(`name`)(
                  <Select placeholder="请选择推送渠道" style={{ width: 250 }} />
                )}
              </Item>
            </Col>
            <Col span={8}>
              <Item label="推送目标：" {...formItemLayout}>
                {getFieldDecorator(`name`)(
                  <Select placeholder="请选择推送目标" style={{ width: 250 }} />
                )}
              </Item>
            </Col>
            <Col span={8}>
              <Item label="归属部门：" {...formItemLayout}>
                {getFieldDecorator(`name`)(
                  <Select placeholder="请选择归属部门" style={{ width: 250 }} />
                )}
              </Item>
            </Col>
            <Col span={8}>
              <Item label="创建时间：" {...formItemLayout}>
                {getFieldDecorator(`name`)(
                  <RangePicker showTime style={{ width: 250 }} />
                )}
              </Item>
            </Col>
          </Row>
        </Form>
        <Table
          columns={columns}
          // rowKey={record => record.login.uuid}
          dataSource={data}
          locale={{ emptyText: "暂无数据！" }}
          // loading={loading}
          // onChange={(e, filters, sorter) =>
          //   this.handleTableChange(e, filters, sorter)
          // }
          pagination={{
            defaultPageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            // current: pageIndex,
            // total: totalCount,
            showTotal: total => `共有 ${total} 条`
          }}
        />
      </div>
    );
  }
}

export default Push;
